<template>
    <div class="visitors settle-sub-box">
        <div class="add">
            <div class="button" @click="$router.push('/visitors-apply')"><i class="iconfont icon-plus"></i></div>
        </div>
        <div class="tabs">
            <div :class="{active: tab==0}" @click="tabChange(0)"><span>未探视</span></div>
            <div :class="{active: tab==2}" @click="tabChange(2)"><span>已探视</span></div>
            <div :class="{active: tab==3}" @click="tabChange(3)"><span>已过期</span></div>
            <div :class="{active: tab==4}" @click="tabChange(5)"><span>已失效</span></div>
        </div>
        <div class="msg-card">
            <div class="list" v-for="(item,index) in visitorList" :key="index">
                <div class="head">
                    <div class="state" :class="'state'+item.status">{{status[item.status]}}</div>
                    <div class="name">{{item.name}}</div>
                    <!--                    <div class="time"><span>探视时间</span> {{item.time}}</div>-->
                </div>
                <div class="info clearfix">
                    <div class="bed"><span>床位号</span> {{item.bedNumber}}</div>
                    <div><span>住院号</span> {{item.admissionNumber}}</div>
                    <div class="mt10"><span>探视时间</span> {{item.time}}</div>
                </div>
            </div>
        </div>

        <infinite-loading @infinite="getList" :identifier="infiniteId" spinner="spiral" :distance="100">
            <div slot="no-more"></div>
            <div slot="no-results"></div>
            <div slot="error" slot-scope="{ trigger }">
            </div>
        </infinite-loading>
        <div class="empty" v-if="!visitorList[0]">暂无探视申请</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tab: 0,
                index: 1,
                visitorList: [],
                infiniteId: +new Date(),
                status: ['未探视', '探视中', '已探视', '已过期', '待确认', '已失效']
            }
        },
        mounted() {
            this.$emit('footerHide')
            this.tabChange(0)
        },
        methods: {
            tabChange(index) {
                this.tab = index
                this.changeLoading()
            },
            changeLoading() {
                this.index = 1
                this.visitorList = []
                this.infiniteId += 1
            },
            getList($state) {
                this.$http.get('/visit/selectVisitPatient', {
                    size: 10,
                    current: this.index || 1,
                    status: this.tab
                }).then(result => {
                    if (result.success) {
                        this.visitorList.push(...result.data.records)
                        if (result.data.pages <= result.data.current) {
                            $state.loaded()
                            $state.complete()
                        } else {
                            this.index += 1
                            $state.loaded()
                        }
                    } else {
                        $state.loaded()
                        $state.complete()
                    }
                }).catch(() => {
                    $state.error()
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .visitors {
        /*background-color: #FBFBFB;*/

        .add {
            padding: .15rem .3rem;
            /*background-color: #FBFBFB;*/

            .button {
                height: .7rem;
                line-height: .7rem;
                text-align: center;
                border: 1px solid #598CDA;
                color: #598CDA;
                border-radius: 3px;
                background-color: #EEF3FF;

                i {
                    font-size: .36rem;
                    font-weight: bolder;
                }
            }
        }

        .tabs {
            display: flex;
            position: relative;
            padding: 0 .3rem;

            > div {
                flex: 1;
                text-align: center;
                /*margin: 0 .1rem;*/
                line-height: .68rem;
                position: relative;
                z-index: 1;

                span {
                    display: inline-block;
                    color: #9E9E9E;
                }

                &.active {
                    position: relative;

                    span {
                        color: #598CDA;
                        border-bottom: 2px solid #598CDA;
                    }
                }
            }
        }
    }

    .msg-card {
        background-color: #fff;
        padding: .2rem .3rem;

        .list {
            padding: 0 .2rem;
            box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
            border-radius: 3px;
            margin-bottom: .2rem;

            .head {
                display: flex;
                align-items: center;
                line-height: 1;
                border-bottom: 1px dashed #E4E4E4;
                padding: .2rem 0;

                .name {
                    /*flex: 1;*/
                    font-weight: bolder;
                }

                .state {
                    padding: .06rem;
                    /*border: 1px solid #FF8989;*/
                    background-color: #DA6959;
                    color: #fff;
                    border-radius: 3px;
                    margin-right: .2rem;
                    font-size: .2rem;
                    /*min-width: 1.15rem;*/
                    text-align: center;

                    &.state4 {
                        background-color: #427BE0;
                    }

                    &.state3 {
                        background-color: #ccc;
                    }

                    &.state2 {
                        background-color: #27D585;
                    }
                }

                .time {
                    flex: 1;
                    text-align: right;
                    color: #749FE0;
                }
            }

            .info {
                padding: .2rem 0;
                color: #a4a4a4;
                font-weight: bolder;
                line-height: 1;

                .bed {
                    float: right;
                }

                span {
                    color: #999;
                    font-weight: normal;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        .empty {
            text-align: center;
            line-height: 1rem;
            color: #999;
        }
    }

    .empty {
        text-align: center;
        padding-top: .5rem;
        color: #999;
    }
</style>
